<template>
  <div class="detail-tab3 content">
    <div class="mg-b20">
      <!-- <div class="title">
        <span>当前主体评级：{{ ratingInfo.latestEntityRating }}</span>
        <span>评级机构：{{ ratingInfo.ratingTypeOrganize }}</span>
      </div>
      <div class="title-small">主体评级历史</div> -->
      <el-table :data="tableData" class="tableBoxChild">
        <!-- <el-table-column label="序号" align="center" type="index">
        </el-table-column> -->
        <el-table-column prop="assetCode" label="债券ID" align="center">
        </el-table-column>
        <!-- <el-table-column prop="bondSname" label="债券简称" align="center">
        </el-table-column> -->
        <el-table-column prop="assetName" label="债券名称" align="center">
        </el-table-column>
        <el-table-column
          prop="ratingTypeOrganize"
          label="评级机构"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="latestEntityRating" label="评级" align="center">
        </el-table-column>
        <!-- <el-table-column prop="bondType" label="变动方向" align="center">
        </el-table-column>
        <el-table-column
          prop="entityRatingForecast"
          label="评级展望"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="preRatingDate" label="评级日期" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="content">
      <!-- <div style="text-align: right">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="年份选择" prop="date">
            <el-date-picker
              v-model="headerSearchForm.date"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div> -->
      <div class="charts">
        <!-- 图表 -->
        <StepLine
          :id="'stepLine'"
          :chartData="chartData"
          :ratingInfoList="ratingInfoList"
          v-if="this.chartData.data.length > 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import StepLine from "./charts/StepLine.vue";
import { BondRatingInformation } from "@/api/customerManagement/bondRiskProfile.js";

export default {
  name: "DetailTab3",
  components: {
    StepLine,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // ratingInfo: {
      //   latestEntityRating: "",
      //   ratingTypeOrganize: "",
      // },
      // headerSearchForm: {
      //   date: "2023",
      // },
      tableData: [],
      ratingInfoList: [
        "AAA",
        "AAA-",
        "AA+",
        "AA",
        "AA-",
        "A+",
        "A",
        "A-",
        "BBB+",
        "BBB",
        "BBB-",
        "BB+",
        "BB",
        "BB-",
        "B+",
        "B",
        "B-",
        "CCC+",
        "CCC",
        "CCC-",
        "CC+",
        "CC",
        "CC-",
        "C+",
        "C",
        "C-",
        "D",
      ],
      chartData: {
        xAxisData: [],
        data: {
          name: "",
          data: [],
        },
      },
    };
  },
  mounted() {},
  created() {
    this.ratingInfoList = this.ratingInfoList.reverse();
    this.getData();
  },
  methods: {
    async getData() {
      const params = {
        bondId: this.rowData.bondId,
      };
      const { data } = await BondRatingInformation(params);
      this.tableData = data;

      // this.ratingInfo = {
      //   latestEntityRating: data[0].latestEntityRating,
      //   ratingTypeOrganize: data[0].ratingTypeOrganize,
      // };
      // 图表数据
      // 评级级别列表
      let xData = [];
      let yData = [];
      data.forEach((element) => {
        xData.push(element.ratingDate);
        yData.push(element.latestEntityRating);
      });
      this.chartData = {
        xAxisData: xData,
        data: [
          {
            name: "信用评级",
            data: yData,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px;
}
.content {
  width: 100%;
  height: 100%;
}
.mg-b20 {
  margin-bottom: 20px;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
    padding-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
</style>
